<template>
  <div style="margin: 10px 20px; display: inline;">
    <p>{{ label }}</p>
    <el-select
        v-if='show'
        v-model='val'
        class='m-2'
        :placeholder='placeholder'
        :size='size'
        :clearable='clearable'
        @change=" changeHandler
  "
    >
      <el-option
          v-for='item in options'
          :key='item.value'
          :label='item.label'
          :value='item.value'
      />
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'ZSelect',
  props: {
    // eslint-disable-next-line vue/require-valid-default-prop
    value: {type: Object, default: () => ''},
    size: {type: String, default: 'default'},
    show: {type: Boolean, default: true},
    disabled: {type: Boolean, default: false},
    readonly: {type: Boolean, default: false},
    multiple: {type: Boolean, default: false},
    filterable: {type: Boolean, default: false},
    placeholder: {type: String, default: () => '请选择'},
    clearable: {type: Boolean, default: true},
    options: {type: Array, default: new Array()},
    label: {type: String, default: null},
    labelLayout: {type: String, default: 'left'},
  },
  watch: {
    value: {
      handler(v) {
        this.val = v;
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      val: {type: Object, default: ''},
    }
  },
  methods: {
    changeHandler(e) {
      this.$emit('change', e);
    },
  },
}
</script>
<style lang="scss" scoped>
p {
  font-size: 13px;
  font-weight: bold;
  color: #787878;
  margin: 0px 5px 0px 0px;
  display: inline;
}
</style>